<template>
  <div class="container">
    <!-- 数据大屏展示内容区域 -->
    <div class="screen" ref="screen">
      <!-- 数据大屏顶部 -->
      <div class="top">
        <Top @whole="getdata_quanguo" :totaltype="totaltype" />
      </div>
      <div class="bottom">
        <div class="left">
          <!-- 车龄、里程数和卖出时间的关系——散点图 -->
          <Age_Mile_Time
            class="tourist"
            v-if="carmile != null"
            :carmile="carmile"
            @changeMonth="changemonth"
          ></Age_Mile_Time>
          <!-- 保值率——折线图 -->
          <Heddge_ratio
            class="sex"
            v-if="carhedgingratio != null"
            :carhedgingratio="carhedgingratio"
          ></Heddge_ratio>
          <!-- .型号数量排行榜——饼图 -->
          <Count
            v-if="carcount != null"
            :carcount="carcount"
            class="age"
          ></Count>
        </div>
        <!-- 地图 -->
        <div class="center">
          <Map @getprovince="getdata_province" class="map"></Map>
          <!-- <Line class="line"></Line> -->
        </div>
        <div class="right">
          <!-- 型号价格排行榜——条形图 -->
          <Price
            v-if="carprice != null"
            :carprice="carprice"
            class="rank"
          ></Price>
          <!-- 自动与手动的比例、电动与燃油的比例——环形图 -->
          <A_H_Ratio
            v-if="cartype != null"
            :cartype="cartype"
            class="year"
          ></A_H_Ratio>
          <!-- 烧油情况——柱状图 -->
          <OilCost
            v-if="oilcost != null"
            :oilcost="oilcost"
            class="count"
          ></OilCost>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeMount } from "vue";
import Top from "./components/top/Top.vue";
import Count from "./components/count/Count.vue";
import Heddge_ratio from "./components/heddge_ratio/Heddge_ratio.vue";
import Age_Mile_Time from "./components/age_mile_time/Age_Mile_Time.vue";
import Map from "./components/map/Map.vue";
import Line from "./components/line/Line.vue";
import Price from "./components/price/Price.vue";
import A_H_Ratio from "./components/a_h_Ratio/A_H_Ratio.vue";
import OilCost from "./components/oilcost/OilCost.vue";
import API from "../../utils/index";
import { useStore } from "vuex";
const store = useStore();
//模拟数据-车型比例
let cartype = ref();
let oilcost = ref();
let carprice = ref();
let carcount = ref();
let carhedgingratio = ref();
let carmile = ref();
let totaltype = ref(""); //统计类型
//发全国请求
const quanguo_a = async () => {
  const res1 = await API.firstneed("a-2023-01to2024-03");
  let arr1 = res1.data.map((item) => item["车名"]);
  let arr2 = res1.data.map((item) => item["发布时间-月"]);
  let arr3 = res1.data.map((item) => item["表显里程"]);
  let arr4 = res1.data.map((item) => item["车龄"]);
  carmile.value = [arr1, arr2, arr3, arr4];
};
const quanguo_b = async () => {
  const res1 = await API.a_h_rate("b_quanguo");
  let arr1 = res1.data.map((item) => item["车名"]);
  let arr2 = res1.data.map((item) => item.HedgingRatio);
  carhedgingratio.value = [arr1, arr2];
};
const quanguo_c = async () => {
  const res1 = await API.a_h_rate("c_quanguo");
  let arr1 = res1.data.map((item) => item["车名"]);
  let arr2 = res1.data.map((item) => {
    return { name: item["车名"], value: item.count };
  });
  carcount.value = [arr1, arr2];
};
const quanguo_d = async () => {
  const res1 = await API.a_h_rate("d_quanguo");
  let arr1 = res1.data.map((item) => item["车名"]);
  let arr2 = res1.data.map((item) => item["价格"]);
  carprice.value = [arr1, arr2];
};
const quanguo_e = async () => {
  const res1 = await API.a_h_rate("e_quanguo");

  cartype.value = [
    [
      { value: res1.data[0]["汽油与纯电动比(%)"], name: "汽油" },
      {
        value: Number((100 - res1.data[0]["汽油与纯电动比(%)"]).toFixed(2)),
        name: "电动",
      },
    ],
    [
      { value: res1.data[0]["自动与手动比(%)"], name: "自动" },
      {
        value: Number((100 - res1.data[0]["自动与手动比(%)"]).toFixed(2)),
        name: "手动",
      },
    ],
  ];
};
const quanguo_f = async () => {
  const res1 = await API.a_h_rate("f_quanguo");
  let arr1 = res1.data.map((item) => item["车名"]);
  let arr2 = res1.data.map((item) => item["燃油成本估算"]);
  let arr3 = res1.data.map((item) => item["平均燃油效率"]);
  oilcost.value = [arr1, arr2, arr3];
};

const getdata_quanguo = async () => {
  totaltype.value = "全国";
  store.commit("changetype", totaltype);
  await Promise.all([
    quanguo_e(),
    quanguo_f(),
    quanguo_d(),
    quanguo_c(),
    quanguo_b(),
    quanguo_a(),
  ]);
};
const changemonth = async (range: any) => {
  // const res1 = await API.firstneed("a-2023-01to2024-03");
  const res1 = await API.firstneed("a-" + range.start + "to" + range.end);
  console.log(res1);

  let arr1 = res1.data.map((item) => item["车名"]);
  let arr2 = res1.data.map((item) => item["发布时间-月"]);
  let arr3 = res1.data.map((item) => item["表显里程"]);
  let arr4 = res1.data.map((item) => item["车龄"]);
  carmile.value = [arr1, arr2, arr3, arr4];
};
//发起省份请求
const province_b = async (province: any) => {
  const res1 = await API.a_h_rate("b_" + province.message);
  let arr1 = res1.data.map((item) => item["车名"]);
  let arr2 = res1.data.map((item) => item.HedgingRatio);
  carhedgingratio.value = [arr1, arr2];
};
const province_c = async (province: any) => {
  const res1 = await API.a_h_rate("c_" + province.message);
  let arr1 = res1.data.map((item) => item["车名"]);
  let arr2 = res1.data.map((item) => {
    return { name: item["车名"], value: item.count };
  });
  carcount.value = [arr1, arr2];
};
const province_d = async (province: any) => {
  const res1 = await API.a_h_rate("d_" + province.message);
  let arr1 = res1.data.map((item) => item["车名"]);
  let arr2 = res1.data.map((item) => item["价格"]);
  carprice.value = [arr1, arr2];
};
const province_f = async (province: any) => {
  const res1 = await API.a_h_rate("f_" + province.message);
  let arr1 = res1.data.map((item) => item["车名"]);
  let arr2 = res1.data.map((item) => item["燃油成本估算"]);
  let arr3 = res1.data.map((item) => item["平均燃油效率"]);
  oilcost.value = [arr1, arr2, arr3];
};
const province_e = async (province: any) => {
  const res1 = await API.a_h_rate("e_" + province.message);
  cartype.value = [
    [
      { value: res1.data[0]["汽油与纯电动比(%)"], name: "汽油" },
      {
        value: Number((100 - res1.data[0]["汽油与纯电动比(%)"]).toFixed(2)),
        name: "电动",
      },
    ],
    [
      { value: res1.data[0]["自动与手动比(%)"], name: "自动" },
      {
        value: Number((100 - res1.data[0]["自动与手动比(%)"]).toFixed(2)),
        name: "手动",
      },
    ],
  ];
};
const getdata_province = async (province: any) => {
  totaltype.value = province.whole;
  store.commit("changetype", province.whole);

  await Promise.all([
    province_e(province),
    province_f(province),
    province_d(province),
    province_c(province),
    province_b(province),
  ]);
};

//获取数据大屏展示内容盒子的DOM元素
let screen = ref();
onMounted(() => {
  screen.value.style.transform = `scale(${getScale()}) translate(-50%,-50%)`; //第一次渲染先缩放再平移回去
});
//页面挂载之前
onBeforeMount(() => {
  getdata_quanguo();
});
//定义大屏缩放比例
function getScale(w = 1920, h = 1080) {
  const ww = window.innerWidth / w; //当前设备的宽度/原稿的宽度得到缩放的比例
  const wh = window.innerHeight / h;
  return ww < wh ? ww : wh;
}
//监听视口变化
window.onresize = () => {
  screen.value.style.transform = `scale(${getScale()}) translate(-50%,-50%)`;
};
</script>

<style scoped lang="scss">
.container {
  width: 100vw;
  height: 100vh;
  background: url(./images/bg.png) no-repeat;
  background-size: cover;
  .screen {
    //内容区域按原稿设置宽高，并固定定位
    position: fixed;
    width: 1920px;
    height: 1080px;
    left: 50%; //移动到视口的一半
    top: 50%;
    transform-origin: left top; //缩放的基准点
    .top {
      width: 100%;
      height: 40px;
    }

    .bottom {
      display: flex;

      .right {
        flex: 1;
        display: flex;
        flex-direction: column;
        margin-left: 0px;

        .rank {
          flex: 1;
        }

        .year {
          flex: 1;
        }

        .count {
          flex: 1;
        }
      }

      .left {
        flex: 1;
        height: 1040px;
        display: flex;
        flex-direction: column;

        .tourist {
          flex: 1;
        }

        .sex {
          flex: 1;
        }

        .age {
          flex: 1;
        }
      }

      .center {
        flex: 2;
        display: flex;
        flex-direction: column;

        .map {
          flex: 3;
        }

        .line {
          flex: 1;
        }
      }
    }
  }
}
</style>